$page-bg-color: #f5f5f5;
$box-bg-color: #ffffff;
$box-bg-color-dark: #141414;
$box-shadow-color: rgba(17, 17, 17, 0.15);
$box-shadow-color-hover: rgba(17, 17, 17, 0.25);
$box-shadow-color-dark: rgba(245, 245, 245, 0.15);
$box-shadow-color-dark-hover: rgba(245, 245, 245, 0.25);

:root {

  .page-bg {
    background-color: $page-bg-color;
  }

  .box-bg {
    background-color: $box-bg-color;
  }

  .box-shadow {
    box-shadow: 0 3px 15px 3px $box-shadow-color;
    transition: box-shadow 300ms ease-in-out;

    &:hover {
      box-shadow: 0 3px 15px 3px $box-shadow-color-hover;
    }
  }

}
